<template>
  <div class="todo-statistics">
    <h3 class="statistics-title">
      统计信息
      <span class="date-indicator">{{ dateFilterText }}</span>
    </h3>
    
    <div class="stats-grid">
      <div class="stat-item">
        <div class="stat-icon pending">
          <el-icon><Clock /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.pendingCount || 0 }}</div>
          <div class="stat-label">待完成</div>
        </div>
      </div>
      
      <div class="stat-item">
        <div class="stat-icon completed">
          <el-icon><Select /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.completedCount || 0 }}</div>
          <div class="stat-label">已完成</div>
        </div>
      </div>
      
      <div class="stat-item">
        <div class="stat-icon today">
          <el-icon>
            <component :is="dateIcon" />
          </el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.todayCount || 0 }}</div>
          <div class="stat-label">{{ statistics.dateLabel || '今日任务' }}</div>
        </div>
      </div>
      
      <div class="stat-item">
        <div class="stat-icon total">
          <el-icon><Document /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.totalCount || 0 }}</div>
          <div class="stat-label">总计</div>
        </div>
      </div>
    </div>
    
    <!-- 进度条 -->
    <div class="progress-section" v-if="statistics.totalCount > 0">
      <div class="progress-header">
        <span class="progress-label">完成进度</span>
        <span class="progress-percent">{{ completionRate }}%</span>
      </div>
      <el-progress 
        :percentage="completionRate" 
        :stroke-width="8"
        :show-text="false"
        color="#67c23a"
      />
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { Clock, Select, Star, Document, Sunny, Moon, Calendar, Histogram } from '@element-plus/icons-vue'

export default {
  name: 'TodoStatistics',
  components: {
    Clock,
    Select,
    Star,
    Document,
    Sunny,
    Moon,
    Calendar,
    Histogram
  },
  props: {
    statistics: {
      type: Object,
      default: () => ({
        pendingCount: 0,
        completedCount: 0,
        todayCount: 0,
        totalCount: 0,
        dateLabel: '今日任务'
      })
    },
    dateFilter: {
      type: String,
      default: 'today'
    },
    customDate: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const completionRate = computed(() => {
      if (props.statistics.totalCount === 0) return 0
      return Math.round((props.statistics.completedCount / props.statistics.totalCount) * 100)
    })
    
    /**
     * 根据日期筛选类型返回对应的图标
     */
    const dateIcon = computed(() => {
      switch (props.dateFilter) {
        case 'yesterday':
          return 'Histogram' // 使用柱状图图标表示昨天（历史数据、过往记录的含义）
        case 'today':
          return 'Star'  // 使用星星图标表示今天（重要）
        case 'tomorrow':
          return 'Sunny' // 使用太阳图标表示明天（未来明亮）
        case 'dayAfterTomorrow':
          return 'Moon'  // 使用月亮图标表示后天（更远的未来）
        case 'custom':
          return 'Calendar' // 使用日历图标表示自定义日期
        default:
          return 'Star'
      }
    })
    
    const dateFilterText = computed(() => {
      if (props.dateFilter === 'custom' && props.customDate) {
        const customDateObj = new Date(props.customDate)
        const customDateStr = customDateObj.toLocaleDateString('zh-CN', { 
          month: 'short',
          day: 'numeric' 
        })
        return `(${customDateStr})`
      } else {
        switch (props.dateFilter) {
          case 'yesterday':
            return '(昨天)'
          case 'today':
            return '(今天)'
          case 'tomorrow':
            return '(明天)'
          case 'dayAfterTomorrow':
            return '(后天)'
          default:
            return '(今天)'
        }
      }
    })
    
    return {
      completionRate,
      dateIcon,
      dateFilterText
    }
  }
}
</script>

<style scoped>
.todo-statistics {
  padding: 16px;
  background: var(--el-bg-color);
  border-radius: 8px;
  border: 1px solid var(--el-border-color-light);
  margin-top: 16px;
}

.statistics-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-indicator {
  font-size: 12px;
  font-weight: 400;
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
  padding: 2px 6px;
  border-radius: 4px;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 6px;
  background: var(--el-fill-color-extra-light);
}

.stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: white;
}

.stat-icon.pending {
  background: var(--el-color-warning);
}

.stat-icon.completed {
  background: var(--el-color-success);
}

.stat-icon.today {
  background: var(--el-color-primary);
}

.stat-icon.total {
  background: var(--el-color-info);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  line-height: 1;
}

.stat-label {
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 2px;
}

.progress-section {
  border-top: 1px solid var(--el-border-color-lighter);
  padding-top: 16px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.progress-label {
  font-size: 14px;
  color: var(--el-text-color-regular);
}

.progress-percent {
  font-size: 14px;
  font-weight: 500;
  color: var(--el-color-success);
}
</style> 